Skip to main content

Pageflow – Page State Events

The Page State Events node in Digisquares Pageflow enables you to react to changes in page‐specific state variables—data load completions, in-page data updates, error flags, or any custom page-level variable. Use this event type to drive logic that depends on the lifecycle of data and state within an individual page, without writing imperative listeners.

1. When to Use Page State Events​

  • Data Load Completion: Trigger downstream actions when an API call bound to a page variable finishes.
  • Error Handling: Respond to page-level error flags by showing user messages or retry dialogs.
  • Local State Changes: Listen to React‐style state updates (e.g., useState hooks) that drive UI components.
  • Conditional Rendering: Kick off subflows when a page variable crosses a threshold (e.g., items.length > 0).

Page State Events fire whenever the selected page variable changes value during the flow’s execution.

2. Opening the Page State Events Palette​

  1. On the Pageflow canvas, hover over the node under which you want to insert the trigger (e.g., the root Page Events node).
  2. Click the + button to open the Actions palette.
  3. Select Page State Events from the list.
CategoryDescription
PageTriggerRoot category for all pageflow triggers.
Page EventsPage lifecycle events (load, unload, scroll).
Control EventsUI control interactions (click, focus, hover, etc.).
App State EventsGlobal state changes (theme, locale, errors, etc.).
Page State EventsChanges in page‐specific variables (data load, state updates, errors).

3. Configuring a Page State Events Node​

When you choose Page State Events, a configuration modal appears:

───────────────────────────────────────────────────
│ Page State Events                              │ ✕ │
├─────────────────────────────────────────────────┤
│ Select Page      [ ▾ page 1                 ] │
│ Select Variable  [ ▾ useStateChange         ] │
├─────────────────────────────────────────────────┤
│                            [ OK ] [ Cancel ]   │
───────────────────────────────────────────────────

3.1 Select Page​

  • Purpose: Choose the target page where the state variable resides.

  • Options: All pages in your project, for example:

    • page 1
    • page 2
    • page 3
    • page 4

Tip: Only variables defined on the selected page will populate the second dropdown.

3.2 Select Variable​

  • Purpose: Pick the page‐scoped variable to monitor.

  • Options: Variables under the Page Variables panel. Example from screenshot:

    • useStateChange
    • (Any other page variables you’ve defined via the Page designer)

Note: If your variable doesn’t appear, ensure it’s declared in the UI → Page Variables section for that page.

4. Advanced Options & Conditions​

Click Advanced (if shown) to reveal:

  • Condition: Only fire when an expression is true (e.g., flow.prevValue !== page.useStateChange).
  • Initial Trigger: Choose whether to invoke the node immediately if the variable already has a value.
  • Debounce/Throttle: For high-frequency state updates, set a minimum interval to prevent over-triggering.

5. Saving & Binding Outputs​

  1. After selecting Page and Variable, click OK.

  2. A Page State Events node appears on the canvas.

  3. Hover to reveal ✏️ Edit and 🗑️ Delete icons.

  4. Click ✏️ to bind the incoming value:

    • In Outputs, map the changed value to a Flow or Page variable (e.g., flow.updatedValue or page.latestData).

  5. Downstream nodes can then reference these bindings for conditional logic or data actions.

6. Example: Refresh Chart on Data Load​

Page Events
 └─ Page State Events: [page 1 > apiDataLoaded]
     └─ UI Action: UpdateChart(data = page.apiData)

Flow:

  1. apiDataLoaded flips to true when the page’s data fetch completes.
  2. The Page State Events node fires, passing page.apiData into the UpdateChart action.
  3. The chart component re-renders with fresh data.

7. Summary​

The Page State Events node provides a declarative, visual way to respond to in-page state changes, eliminating manual listeners and ensuring maintainable flows.